<template>
  <div>
    <div class="back" @click="toSuperMarket">
      <i class="el-icon-close"></i>开通会员
    </div>
    <div class="member-list">
      <ul>
        <li v-for="item in memberList" :key=item.id @click="changeType(item)" id="mem" :class="{'click':index==item.id}">
          <p class="mp1">{{item.time}}</p>
          <p class="mp2">￥<span>{{item.money}}</span></p>
          <p class="mp3">{{item.last}}</p>
        </li>
      </ul>
    </div>
    <div class="list">
        <ul>
          <li>
            <span>会员抵扣红包</span>
            <div class="list-info">
              <span>无可用抵扣红包</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </li>
          <li style="margin-top: 60px;border-top: 1px solid rgba(7,17,27,.1)">
            <span>免费送最高12个月会员</span>
            <div class="list-info">
              <i class="el-icon-arrow-right" style="float: right;margin-right: 10px;line-height: 40px"></i>
            </div>
          </li>
          <li>
            <span>使用兑换码兑换会员</span>
            <div class="list-info">
              <i class="el-icon-arrow-right" style="float: right;margin-right: 10px;line-height: 40px"></i>
            </div>
          </li>
        </ul>
    </div>
    <div class="footer" v-show="payFlag">
        <div class="footer-left">
          总价<span class="spa1">￥{{paymoney}}</span><span class="spa2">{{lastmoney}}</span>
        </div>
        <div class="footer-right" @click="sureMember">
          去支付
        </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        memberList: [{'time': '连续包月', 'money': '10', 'last': '￥15', 'id': 1},
          {'time': '连续包季', 'money': '15', 'last': '￥45', 'id': 2},
          {'time': '连续包年', 'money': '108', 'last': '￥180', 'id': 3}
        ],
        bg: 'white',
        index: -1,
        paymoney: '0',
        lastmoney: '0',
        payFlag: false
      }
    },
    methods: {
      toSuperMarket () {
        this.$router.push('/supermarket')
      },
      changeType (item) {
        this.index = item.id
        this.paymoney = item.money
        this.lastmoney = item.last
        this.payFlag = true
      },
      sureMember () {
        window.alert(`需要支付${this.paymoney}元`)
        this.$toast.center('您已支付成功')
        this.$store.dispatch('changeMember', true)
        this.$router.push('/supermarket')
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus">
  @import '../../common/stylus/mixin.styl'
      .back
        width :100%
        height :40px
        background-color :blue
        line-height :40px
        color :white
        padding-left :10px
        font-size :14px
        i
          margin-right :20px
          font-size :18px
      .member-list
        margin-top :20px
        ul
          list-style :none
          li
            width :29%
            height :179px
            text-align :center
            border :1px solid rgba(7,17,27,.1)
            float :left
            margin-left :3%
            box-sizing :border-box
            .mp1
              font-size :20px
              margin-top :30px
              font-weight :bold
              margin-bottom :20px
            .mp2
              font-size :20px
              color :red
              font-weight :bold
              margin-bottom :20px
              span
                font-size :30px
            .mp3
              font-size :12px
              color:#cccccc
              text-decoration :line-through
          .click
            background-color :goldenrod
      .footer
        width :100%
        height :50px
        line-height :60px
        position :fixed
        bottom :0
        left :0
        border-top :1px solid rgba(7,17,27,.1)
        .footer-left
          float :left
          margin-left :20px
          .spa1
            color :red
          .spa2
            color :#cccccc
            font-size :10px
            text-decoration :line-through
            margin-left :5px
        .footer-right
          float :right
          width :30%
          background-color :goldenrod
          text-align :center
      .list

        ul
          list-style :none
          li
            line-height :40px
            border-bottom :1px solid #cccccc
            span
              font-weight :bold
              margin-left :10px
            .list-info
              float :right
              width :30%
              font-size :12px
              color:#cccccc

</style>
